<template>
  <div id="app">
    <h2>注册账号</h2>
    <div class="inp">
      <input type="text" placeholder="手机/用户名" v-model="phone" />
      <input type="password" placeholder="密码" v-model="pass" />
    </div>
    <button @click="register">注册账号</button>
    <div class="lan">
      <a href="/Login">已有账号去登录</a>
    </div>
    <footer>
      <input type="checkbox" />
      <p>已阅读并同意</p>
      <a href="#">《用户服务协议》、《隐私权策》</a>
    </footer>
  </div>
</template>

<script>
import { user_register } from "../api";
export default {
  data() {
    return {
      phone: "",
      pass: "",
    };
  },
  methods: {
    register() {
      user_register({ phone: this.phone, pass: this.pass }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$router.push("/Login");
        }
      });
    },
  },
};
</script>

<style scoped>
#app {
  box-sizing: border-box;
  padding: 30px;
}

a {
  text-decoration: none;
  color: blue;
}

.inp {
  margin: 20px 0;
}

.inp input {
  width: 100%;
  height: 40px;
  outline: none;
  border: none;
  border-bottom: 1px solid gray;
  text-indent: 10px;
}

button {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  outline: none;
  border: 1px solid gray;
  color: gray;
  margin-bottom: 10px;
}

.lan {
  display: flex;
  justify-content: space-between;
}

footer {
  display: flex;
  font-size: 12px;
  margin-top: 100px;
  align-items: center;
}
</style>